<template>
	<div class="Home">
		    <i class="home-i"></i>
		<div class="home-p" @click.stop="aff()" v-show="flags" @mouseout="out()">
			<i class="el-icon-setting"></i>
			退出登录
		</div>
		<div class="home-head">
      <span class="home-span1" @mouseover="add()" >
        <i class="el-icon-user"></i>
        欢迎 {{$route.query.username}}
      </span>
		</div>
		<div class="home-nav">
			<div class="home-left">
				<el-row class="tac">
					<el-col :span="12">
						<el-menu
								default-active="2"
								class="el-menu-vertical-demo"
								background-color="#2b2e33"
								text-color="#000"
						>
							<el-menu-item index="4">
								<i class="el-icon-s-data"></i>
								<router-link to="/head" tag="span" slot="title" class="home-span">
									首页
								</router-link>
							</el-menu-item>
							<el-submenu index="1">
								<template slot="title">
									<i class="el-icon-s-fold"></i>
									<span class="home-span">商品</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="1-1">
										<router-link to="/good" tag="span" class="home-span">
											商品管理
										</router-link>
									</el-menu-item>
									<el-menu-item index="1-2">
										<router-link to="/faker" tag="span" class="home-span">
											品类管理
										</router-link>
									</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
							<el-submenu index="2">
								<template slot="title">
									<i class="el-icon-success"></i>
									<span class="home-span">订单</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="1-1">
										<router-link to="/word" tag="span" class="home-span">
											订单管理
										</router-link>
									</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
							<el-submenu index="3">
								<template slot="title">
									<i class="el-icon-user"> </i>
									<span class="home-span">用户</span>
								</template>
								<el-menu-item-group>
									<el-menu-item index="1-1">
										<router-link to="/list" tag="span" class="home-sapn">
											用户列表
										</router-link>
									</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
						</el-menu>
					</el-col>
				</el-row>
			</div>
			<div class="home-right">
				<keep-alive include="good">
					<router-view></router-view>
				</keep-alive>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Home",
		data(){
			return{
				flags:false
			}
		},
		methods: {
			aff(){
				this.$router.push("/login");
				this.flags=false
			},
			add(){
				this.flags=true
			},
			out(){
				this.flags=false
			}
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
	@import "./../../Scss/index.scss";
	.Home{
		position: relative;
		@include SizeBack(100%,969px,#ccc);
		.home-head{
			@include SizeBack(100%,60px,#fff);
			.home-span1{
				float: right;
				line-height: 60px;
			}
		}
		.home-p{
			width: 200px;
			height: 50px;
			position: absolute;
			background-color: #fff;
			right: 0;
			top: 60px;
			text-align: center;
			line-height: 40px;
			border: 1px solid #ccc;
		}
		.home-nav{
			width: 100%;
			height: 899px;
			display: flex;
			.home-left{
				width: 220px;
				height: 969px;
				background-color: #000;
				margin-top: -60px;
				opacity: 90%;
				/*.home-span{*/
				/*	color: #cccccc;*/
				/*}*/
				.el-menu-vertical-demo{
					width: 220px;
					height: 899px;
					padding-top: 70px;
				}
			}
			.home-right{
				width: 80%;
				height: 100%;
			}
		}
		.home-span{
			color: #ffffff;
		}

	}


	/*.el-menu-item-group__title{*/
	/*  padding: 0;*/
	/*}*/


	/*.el-submenu__title{*/
	/*  font-size: 20px;*/
	/*  color: #000;*/

	/*}*/
	/*.el-menu-item {*/

	/*  font-size: 20px;*/
	/*  background: none;*/
	/*}*/
	/*.el-menu-item.is-active{*/
	/*  color: black;*/
	/*}*/


</style>
